<template>
  <div id="case-start">
    <Tabs type="card">
      <TabPane label="案例联席开课"
               icon="md-settings">
        <div>
          <Form :model="form"
                label-position="left"
                :label-width="60">
            <Row>
              <Col span="6">
              <FormItem label="课程名称"
                        class="inputcommon">
                <Input v-model="form.courseName"
                       clearable></Input>
              </FormItem>
              </Col>
              <Col span="6"
                   v-if="0">
              <FormItem label="课程类型"
                        class="inputcommon">
                <Select v-model="form.roleId"
                        clearable
                        style="width:180px"
                        @on-change="roleChange">
                  <Option v-for="item in options"
                          :value="item.value"
                          :key="item.value">{{ item.label }}</Option>
                </Select>
              </FormItem>
              </Col>
              <Col span="6">
              <FormItem class="btn-wrap">
                <Button type="primary"
                        @click="getList">查询</Button>
                <Button type="primary"
                        v-if="0"
                        @click="addOrUpdateHandle()">添加</Button>
              </FormItem>
              </Col>
            </Row>
          </Form>
          <Table :loading="dataListLoading"
                 border
                 :columns="columns"
                 :data="data"></Table>
          <div class="page">
            <Page @on-change="currentChangeHandle"
                  :total="totalPage"
                  :page-size="pageSize" />
          </div>
        </div>
      </TabPane>
    </Tabs>
    <add-or-update v-if="addOrUpdateVisible"
                   ref="addOrUpdate"
                   @refreshDataList="getList"></add-or-update>
  </div>
</template>
<script>
import AddOrUpdate from './live-start-steps'
import { getCourseInfo, deleteCourse, updateCourse } from '@/api/management.js'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
      form: {
        courseName: '',
        roleId: '',
        no: ''
      },
      columns: [
        {
          title: '课程名',
          key: 'courseName',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'person'
                }
              }),
              h('strong', params.row.courseName)
            ])
          }
        },
        {
          title: '课程类型',
          key: 'courseType',
          render: (h, params) => {
            return h('div', params.row.courseType == "0" ? '普通课程' : "案例联席")
          }
        },
        {
          title: '课程状态',
          key: 'courseStatus',
          render: (h, params) => {
            return h('div', params.row.courseStatus == "0" ? '未开始' : params.row.courseStatus == "1" ? "进行中" : "已结束")
          }

        },
        {
          title: '创建时间',
          key: 'createTime',
          render: (h, params) => {
            return h('div', params.row.createTime ? params.row.createTime.slice(0, 19) : '')
          }
        },
        {
          title: '开始上课时间',
          key: 'courseStartTime',
          render: (h, params) => {
            return h('div', params.row.courseStartTime ? params.row.courseStartTime.slice(0, 19) : '')
          }
        },
        {
          title: '结束上课时间',
          key: 'courseStopTime',
          render: (h, params) => {
            return h('div', params.row.courseStopTime ? params.row.courseStopTime.slice(0, 19) : '')
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 100,
          align: 'center',
          render: (h, params) => {
            if (params.row.courseStatus == 0) {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.classBegin(params.row)
                      }
                    }
                  },
                  '开始上课'
                ),
              ])
            }
            if (params.row.courseStatus == 1) {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.classBegin(params.row)
                      }
                    }
                  },
                  '结束上课'
                ),
              ])
            }
          }
        }
      ],
      data: [
        {
          loginName: '管理',
          roleId: 1,
          roleName: '管理',
          password: '123',
          no: ''
        },
        {
          loginName: '张三',
          roleId: 2,
          roleName: '老师',
          password: '123',
          no: ''
        },
        {
          loginName: '李四',
          roleId: 4,
          roleName: '专家',
          password: '123',
          no: ''
        },
        {
          loginName: '王二',
          roleId: 3,
          roleName: '学生',
          password: '123',
          no: '三年二班'
        },
        {
          loginName: '狗蛋',
          roleId: 3,
          roleName: '学生',
          password: '123',
          name: '狗蛋',
          mobile: '13588889999',
          email: 'qq@qq.com',
          no: '三年三班'
        }
      ],
      options: [
        {
          value: 0,
          label: '普通类型'
        },
        {
          value: 1,
          label: '案例联席'
        },
      ],
      addOrUpdateVisible: false,
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      dataListLoading: false
    }
  },
  computed: {
    ...mapState({
      hasGetInfo: state => state.user.hasGetInfo,
      userName: state => state.user.userName,
      userId: state => state.user.userId,
      avatorImgPath: state => state.user.avatorImgPath,
      roleName: state => state.user.roleName,
      roleId: state => state.user.roleId,
    }),
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 删除
    remove (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>是否对该用户进行删除操作</p>',
        loading: true,
        onOk: () => {
          deleteCourse(id).then(res => {
            if (res.data == 'success') {
              this.$Modal.remove()
              this.$Message.info('课程删除成功')
              this.getList()
            }
          })
        }
      })
    },
    // 新增 / 修改
    addOrUpdateHandle (row) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(row)
      })
    },
    // 获取表格数据
    getList () {
      const date = []
      // this.form.time.map(item => {
      //   if (item != '') {
      //     date.push(dateFormat(item))
      //   }
      // })
      this.dataListLoading = true
      const params = {
        userId: this.userId,
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
        courseName: this.form.courseName
      }
      getCourseInfo(params).then(({ data }) => {
        if (data.rows.length > 0) {
          let liveData = data.rows
          let liveData2 = []
          liveData.forEach(item => {
            if (item.courseType == 1) {
              liveData2.push(item)
            }
          })
          this.data = liveData2
          this.totalPage = data.total
        } else {
          this.data = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getList()
    },
    roleChange (value) {
      if (!value) {
        this.form.roleId = 0
      }
    },
    classBegin (row) {
      let status = '2'
      let flag = 'stop'
      if (row.courseStatus == 0) {
        status = '1'
        flag = 'start'
      }

      let data = {
        courseId: row.courseId,
        courseStatus: status,
        flag: flag
      }
      updateCourse(data).then(res => {
        if (res.data == 'success') {
          if (data.courseStatus == 0) {
            this.$Message.info('开始上课成功')
          } else {
            this.$Message.info('结束上课成功')
          }
          this.getList()
        }
      })
    },
  },
  watch: {},
  components: {
    AddOrUpdate
  }
}
</script>
<style lang="scss">
#case-start {
  width: 100%;
  height: 100%;
  .ivu-row {
    height: 60px;
  }
  .inputcommon {
    .ivu-input-wrapper {
      width: 180px;
    }
  }
  .page {
    text-align: center;
    padding-top: 40px;
  }
  .btn-wrap {
    text-align: right;
  }
}
</style>
